<template>
  <div class="app" >
    <div class="nav">
        <h3>猜你喜欢</h3>
       <div class="dv" >
       <h4 @click="mySort(index)" v-for="(item,index) in searchArr" :key="index"> {{item}}</h4> 
       </div>
       <div class="hot">
      <span  v-for="(item,index) in hotArr" :key="index">{{item}}</span> 
       </div>
    </div>
    <div class="banner">
         <div class="list"  v-for="(item,index) in list" :key="index" >
        <img src="./../assets/logo.png" alt="">
    <div class="text">
        <div>{{item.name}}</div>
        <div><span>评分：{{item.score}}</span>   月售：{{item.saled}}</div>
    </div>
    </div>
    </div>
   
  
  </div>
</template>

<script>
let pic="https://img2.baidu.com/it/u=4147884680,3389833900&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1665766800&t=d60e4d4fcd3e5ddd8d5742e9c7cde29f"
export default {
 data(){
    return {
       list:[
       {pic,name:"烤鸭店",saled:1688,score:4.5},
       {pic,name:"饺子馆",saled:888,score:4.9},
       {pic,name:"山西刀削面",saled:234,score:3.5}
    ],
    searchArr:["综合排序","距离最近","销量最高","筛选"],
    hotArr:["年货节热卖","津贴联盟","满减优惠","品质联盟"]
    }
 },
 methods:{
    mySort(index){
        console.log("绑定好了")
         if(index==0){
            this.list.sort(function(a,b){
                 return b.score-a.score
            })
         }else if(index==2){
            this.list.sort(function(a,b){
                 return b.saled-a.saled
            })
         }
    }
 }
}
</script>

<style lang="scss" scoped>
.app{
    box-sizing: border-box;
    padding: 10px;
}
.list{
   display: flex;
   margin-bottom: 20px;
}
img{
    width: 80px;
    height: 80px;
}
.text{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.nav h3{
margin-top: 20px;
}
.dv,.hot {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
}
.hot span{
    margin-right: 10px;
    display: inline-block;
    padding: 5px 8px;
    font-size: 14px;
    background-color: #f5f5f5;
}
.banner{
    margin-bottom: 60px;
}
</style>